<template>
	<el-container>
		<el-header style="text-align: center;display: block;">
			<span style="font-weight: 600;font-size: 18px;">合同财务信息汇总</span>
		</el-header>
		<el-main class="nopadding">
			<div style="width: 50%;display: inline-block">
				<el-card header="近期收款记录(最近10条)">
					<scTable ref="table" :data="tableData1" row-key="recordId" stripe height="300px">
						<el-table-column label="合同标题" prop="title" width="250" :show-overflow-tooltip="true"></el-table-column>
						<el-table-column label="收款人" prop="payeeUserName" width="150"></el-table-column>
						<el-table-column label="收款时间" prop="payeeTime" width="150"></el-table-column>
						<el-table-column label="收款金额" prop="amount" :show-overflow-tooltip="true">
							<template #default="scope">
								{{scope.row.amount}}/元
							</template>
						</el-table-column>
					</scTable>
				</el-card>
				<el-card header="近期付款记录(最近10条)">
					<scTable ref="table" :data="tableData2" row-key="recordId" stripe height="300px">
						<el-table-column label="合同标题" prop="title" width="250" :show-overflow-tooltip="true"></el-table-column>
						<el-table-column label="付款人" prop="payerUserName" width="150"></el-table-column>
						<el-table-column label="付款时间" prop="payableTime" width="150"></el-table-column>
						<el-table-column label="付款金额" prop="amount" :show-overflow-tooltip="true">
							<template #default="scope">
								{{scope.row.amount}}/元
							</template>
						</el-table-column>
					</scTable>
				</el-card>
			</div>
			<div style="width: 50%;display: inline-block">
				<el-card header="近期票据(最近10条)">
					<scTable ref="table" :data="tableData3" row-key="billId" stripe height="300px">
						<el-table-column label="合同标题" prop="title" width="250" :show-overflow-tooltip="true"></el-table-column>
						<el-table-column label="发票编号" prop="billCode" width="150" :show-overflow-tooltip="true"></el-table-column>
						<el-table-column label="票据类型" prop="billTypeName" width="150"></el-table-column>
						<el-table-column label="开票时间" prop="billTime" width="150"></el-table-column>
						<el-table-column label="票面金额" prop="total" :show-overflow-tooltip="true">
							<template #default="scope">
								{{scope.row.total}}/元
							</template>
						</el-table-column>
					</scTable>
				</el-card>
				<el-card header="近期合同(最近10条)">
					<scTable ref="table" :data="tableData4" row-key="contractId" stripe height="300px">
						<el-table-column label="合同编号" prop="contractCode" width="150" :show-overflow-tooltip="true"></el-table-column>
						<el-table-column label="合同标题" prop="title" width="250" :show-overflow-tooltip="true"></el-table-column>
						<el-table-column label="客户名称" prop="customerName" width="150" :show-overflow-tooltip="true"></el-table-column>
						<el-table-column label="合同类型" prop="contractTypeName" width="150"></el-table-column>
						<el-table-column label="签定时间" prop="signTime" width="150"></el-table-column>
						<el-table-column label="合同金额" prop="total" :show-overflow-tooltip="true">
							<template #default="scope">
								{{scope.row.total}}/元
							</template>
						</el-table-column>
					</scTable>
				</el-card>
			</div>
		</el-main>
	</el-container>
</template>

<script>
export default {
	name: 'Contract Total Manage',
	data() {
		return {
			tableData1:[],
			tableData2:[],
			tableData3:[],
			tableData4:[],
		}
	},
	mounted() {
		this.getReceivablesRecordTop();
		this.getPayableRecordTop();
		this.getContractBillTop();
		this.getContractTop();
	},
	methods: {
		async getReceivablesRecordTop()
		{
			var res = await this.$API.finance.contract.getReceivablesRecordTop.get();
			if (res.code == 200) {
				this.tableData1 = res.data;
			}
		},
		async getPayableRecordTop()
		{
			var res = await this.$API.finance.contract.getPayableRecordTop.get();
			if (res.code == 200) {
				this.tableData2 = res.data;
			}
		},
		async getContractBillTop()
		{
			var res = await this.$API.finance.contract.getContractBillTop.get();
			if (res.code == 200) {
				this.tableData3 = res.data;
			}
		},
		async getContractTop()
		{
			var res = await this.$API.finance.contract.getContractTop.get();
			if (res.code == 200) {
				this.tableData4 = res.data;
			}
		}
	}
}
</script>

<style>
</style>
